@extends('layout.default')

@section('stylesheet')
  <link href="//cdn.bootcss.com/jquery-treegrid/0.2.0/css/jquery.treegrid.min.css" rel="stylesheet">
  <link href="//cdn.bootcss.com/bootstrap-table/1.13.1/bootstrap-table.min.css" rel="stylesheet">
@stop

@section('layout.content')
  <div class="row">
    <div class="col-xs-12">
      <a href="{{route("system.enum.create")}}" class="btn btn-primary"><i class="ace-icon fa fa-plus"></i>参数</a>
    </div>
  </div>
  <div class="space-4"></div>
  <div class="row">
    <div class="col-xs-12">
      <table class="table table-hover table-bordered table-striped" id="table"></table>

    </div><!-- /.col -->
  </div><!-- /.row -->
@stop

@section('javascript')
  <script src="//cdn.bootcss.com/bootstrap-table/1.13.1/bootstrap-table.min.js"></script>
  <script src="//cdn.bootcss.com/bootstrap-table/1.13.1/extensions/treegrid/bootstrap-table-treegrid.min.js"></script>
  <script src="//cdn.bootcss.com/jquery-treegrid/0.2.0/js/jquery.treegrid.min.js"></script>

  <script type="text/javascript">


      //console.log(data1);
      $(function () {
          var $table = $('#table');
          var uri = '{{route("system.getEnumeration")}}';

          $table.bootstrapTable({
              url: uri,
              idField: 'id',
              treeId: "id",
              columns: [
                  {field: 'id', title: '参数值', align: 'center'},
                  {field: 'title', title: '名称'},
                  {field: 'status', title: '状态', align: 'center', formatter: 'statusFormatter'},
                  {field: 'operate', title: '操作', align: 'right', events: operateEvents, formatter: 'operateFormatter'},
              ],

              // bootstrap-table-treegrid.js 插件配置 -- start

              //在哪一列展开树形
              treeShowField: 'title',
              //指定父id列
              parentIdField: 'parent',

              onLoadSuccess: function (data) {
                  console.log(data);
                  $table.treegrid({
                      initialState: 'collapsed',
                      treeColumn: 1,
                      expanderExpandedClass: 'glyphicon glyphicon-triangle-bottom',
                      expanderCollapsedClass: 'glyphicon glyphicon-triangle-right',
                      onChange: function () {
                          $table.bootstrapTable('resetWidth');
                      }
                  });
              }

              // bootstrap-table-treetreegrid.js 插件配置 -- end
          });


      });

      function operateFormatter(value, row, index) {
          var pid = row.id;
          if (row.parent == 0) {
              return [
                  '<button type="button" class="btn btn-minier btn-primary" style="margin-right:5px;">新增</button>',
                  '<a href="/system/parameter/' + row.id + '/edit" type="button" class="btn btn-minier btn-yellow">修改</a>'
              ].join('');
          } else {
              return [
                  '<a href="/system/parameter/' + row.id + '/edit" type="button" class="btn btn-minier btn-yellow" style="margin-right:5px;">修改</a>',
                  '<button type="button" class="btn btn-minier btn-danger">删除</button>'
              ].join('');
          }
      }


      function statusFormatter(value, row, index) {
          if (value === 1) {
              return '<span class="btn btn-minier btn-success">正常</span>'
          }
          return '<span class="btn btn-minier btn-default">锁定</span>'
      }

      window.operateEvents = {
          'click .btn-add': function (e, value, row, index) {
              add(row.id);
          },

          'click .btn-delete': function (e, value, row, index) {
              del(row.id);
          }
      };

      function add(id) {
          alert("add 方法 , id = " + id);
      }

      function del(id) {
          alert("del 方法 , id = " + id);
      }

      function update(id) {
          alert("update 方法 , id = " + id);
      }


  </script>
@stop